<template>
	<!-- 确定订单 v-if="cart.length !== 0"-->
	<view class="cart-container">
		<!-- 收货地址组件 -->
		<my-adress ref="myAddressComponent" @exchangeAddress='exchangeAddress'></my-adress>
		<!-- 商品清单 -->
		<view v-if="formData.product">
			<view class="product_list_box">
				<view class="product_list_title">商品清单</view>
				<view class="product_express">
					<view>发货方式：</view>
					<view>快递</view>
				</view>
				<view class="product_list_item">
					<view class="product_item_left">
						<image :src="formData.product.imgurl" class="produce_image"></image>
						<view class="produce_details">
							<view class="produce_name">
								{{formData.product.name}}
							</view>
							<view class="produce_price">
								<view class="price_box">{{formData.product.integral}}</view>

								<!-- <view class="price_box" v-if="formData.money!=0">
                                    {{formData.integral}}积分+{{formData.money}}现金
                                </view> -->
								<view>X{{formData.exchangeCount}}</view>
							</view>
						</view>
					</view>

				</view>
				<!--卖家留言 -->
				<view class="message_box">
					<text>买家留言:</text>
					<input placeholder="非必填" v-model="formData.message"></input>

				</view>

			</view>
			<view class="goods_button">
				<view class="goods_buttonBox">

					<view class="button_left">
						<view>消费：</view>
						<view style="margin-right: 20rpx;">
							{{formData.totalPrice }}
						</view>
						<view class="goodsInfo_goodsInfo1" @click="redeemRecordAddress"> 确定兑换</view>
					</view>
				</view>
			</view>

		</view>
		<!-- 从我的订单进来 -->
		<view v-else>
			<view class="product_list_box">
				<view class="product_list_title">商品清单</view>
				<view class="product_express">
					<view>发货方式：</view>
					<view>快递</view>
				</view>
				<view class="product_list_item">
					<view class="product_item_left">
						<image :src=" formData.imgUrl" class="produce_image"></image>
						<view class="produce_details">
							<view class="produce_name">
								{{formData.name}}
							</view>
							<view class="produce_price">
								<view class="price_box">{{formData.redeemIntegral}}积分</view>
								<view class="price_box" v-if="formData.money!=0">
									{{formData.integral}}积分+{{formData.money}}现金
								</view>
								<view>X{{formData.goodsCount}}</view>
							</view>
						</view>
					</view>

				</view>
				<!--卖家留言 -->
				<view class="message_box">
					<text>买家留言:</text>
					<input style="font-size: 28rpx;" placeholder="非必填" v-model="formData.message"></input>
				</view>

			</view>
			<view class="goods_button">
				<view class="goods_buttonBox">
					<view class="button_left" v-if="isIntegral==='1'">
						<view>总积分：</view>
						<view>
							{{redeemTotalIntegral}}积分
						</view>
						<view class="goodsInfo_goodsInfo1" @click="buttonClick"> 确定兑换</view>
					</view>
					<view class="button_left" v-if="isIntegral==='0'">
						<view>消费金额：</view>
						<view style="margin-right: 20rpx;">
							{{totalIntegral}}积分+{{totalMoney}}现金
						</view>
						<view class="goodsInfo_goodsInfo1" @click="buttonClick"> 确定兑换</view>
					</view>
				</view>
			</view>

		</view>

	</view>
</template>

<script>
	import {
		getMemberInfo
	} from '@/utils/utils.js';
	import request from '../../utils/request';
	import MyAdress from '../../components/myaddress/myaddress.vue';
	import {
		mapGetters,
		mapMutations
	} from 'vuex'

	export default {
		components: {
			MyAdress
		},
		computed: {
			...mapGetters('m_order', ['orderInfo', 'goodsCount']),
			totalIntegral() {
				return this.formData.integral * this.formData.goodsCount
			},
			totalMoney() {
				return (this.formData.money * this.formData.goodsCount).toFixed(2)
			},
			// addressTitle() {
			// 	const data = this.addressResult.filter(item => item.status === 1);
			// 	console.log(data[0],'###')
			// 	return data[0];
			// },
			redeemTotalIntegral() {
				return this.formData.redeemIntegral * this.formData.goodsCount
			}
		},
		onLoad(options) {
			if (options.orderInfo) {
				this.isIntegral = options.isIntegral
				this.formData = JSON.parse(options.orderInfo)
			} else {
				this.formData = this.orderInfo
				this.isIntegral = this.orderInfo.isIntegral
			}
		},
		onShow() {
			this.onAddressAdded()
		},
		data() {
			return {
				isIntegral: false,
				formData: {
					message: "",
				},
				orderData: {
					token: '',
					addressId: '',
					shopId: '',
					message: "",
					payType: '',
					exchangeCount: ''
				},
				addressResult: [],
				addressTitle: []
			};
		},
		methods: {
			exchangeAddress(data) {
				this.addressTitle = data
			},
			onAddressAdded() {
				// 新增地址后的回调
				this.$refs.myAddressComponent.refreshData(); // 通知子组件刷新数据
			},
			redeemRecordAddress() {
				this.orderData.id = this.formData.id
				this.orderData.recipientAddress = this.addressTitle.province +
					this.addressTitle.city + this.addressTitle.region + this.addressTitle.streetAddress
				this.orderData.recipientName = this.addressTitle.name
				this.orderData.recipientPhone = this.addressTitle.phone
				this.orderData.recipientCode = this.addressTitle.regionCode
				this.orderData.buyerMessage = this.formData.message
				if (this.addressTitle.name === '' || this.addressTitle.phone === '' || this.orderData.recipientAddress ==
					'' || this.orderData.id === '') {
					uni.$showMsg('地址填写有误！')
				}
				request.post('/redeemRecord/address', this.orderData).then(res => {
					if (res.code === 0) {
						this.saveAddressList("{}")
						uni.$showMsg(res.msg)
						uni.navigateTo({
							url: '/subpkg/myOrder/myOrder'
						})
					} else {
						uni.$showMsg(res.msg)
					}
				})

			},
			...mapMutations('m_order', ['saveAddressList']),
			// 到地址列表
			toAddressList() {
				uni.navigateTo({
					url: '/subpkg/orderAddress/orderAddress'
				})
			},
			// 获取到地址
			getAddress() {
				request.get('/memberAddress/getList').then(res => {
					if (res.code === 0) {
						const data = res.data.filter(item => item.status === 1);
						this.addressTitle = data[0]
					} else {
						uni.$showMsg(res.msg)
					}
				})
			},
			// 获取会员信息
			async MemberNum() {
				this.integralNum = await getMemberInfo();
				uni.setStorageSync('memberNum', this.integralNum)
				this.$store.commit('m_user/saveMemberNum', this.integralNum);
			},
			// 兑换
			buttonClick() {
				this.orderData.exchangeCount = this.formData.goodsCount;
				this.orderData.shopId = this.formData.id;
				this.orderData.message = this.formData.message;
				this.orderData.token = uni.getStorageSync('orderToken')
				if (this.addressTitle.length === 0) {
					uni.$showMsg('地址填写有误！')
				} else {
					this.orderData.addressId = this.addressTitle.id;
					if (this.isIntegral === '0') {
						// isIntegral为0，积分+现金，
						this.orderData.payType = 1;
						// 判断积分+现金的积分
						if (uni.getStorageSync('memberNum') >= this.totalIntegral) {
							// if (uni.getStorageSync('memberNum') >= this.formData.redeemIntegral) {
							this.exchangePost(this.orderData)
						} else {
							uni.$showMsg('积分不足，暂不能兑奖')
						}

						// this.exchangePost(this.orderData)
					} else {
						// 纯积分兑换
						this.orderData.payType = 0;
						if (uni.getStorageSync('memberNum') >= this.redeemTotalIntegral) {
							// if (uni.getStorageSync('memberNum') >= this.formData.redeemIntegral) {
							this.exchangePost(this.orderData)
						} else {
							uni.$showMsg('积分不足，暂不能兑奖')
						}

					}
				}
			},
			// 兑换接口
			exchangePost(item) {
				request.post('/redeemRecord/exchange', item).then(res => {
					if (res.code === 0) {
						this.MemberNum()
						this.saveAddressList("{}")
						uni.$showMsg(res.msg)
						// 纯积分兑换
						if (this.isIntegral === '1') {
							uni.navigateTo({
								url: '/subpkg/myOrder/myOrder'
							})
						} else {
							this.formData.orderNo = res.data.orderNo
							// 到支付页面，积分+现金，
							uni.navigateTo({
								url: '/pages/payment/payment?orderInfo=' + JSON.stringify(this.formData)
							})
						}

					} else {
						uni.$showMsg(res.msg)
					}
				})
			},
			// 纯积分兑换
			// buttonClickIntegral() {
			// 	this.orderData.payType = 0 //1是积分
			// 	this.buttonClick()

			// }
		}
	}
</script>

<style lang="scss">
	.cart-container {
		font-size: 32rpx;

		// padding :10rpx 10rpx 50rpx 10rpx;
		.addressIcon-box {
			margin-top: 5rpx;
			background-color: white;
			display: flex;
			justify-content: space-between;
			align-items: center;

			.addressIcon-box-to {
				font-weight: bold;
				display: flex;
				align-items: center;
			}

			.addressIcon-navigator {
				margin-right: 10rpx;
				color: #ff5555;
			}
		}

		.addressIcon-container {
			margin-top: 5rpx;
			background-color: white;

			.addressIcon-top {
				display: flex;
				justify-content: space-between;
				align-items: center;

				.addressIcon-box-to {
					font-weight: bold;
					display: flex;
					align-items: center;
				}
			}

		}
	}

	.cart-title {
		height: 40rpx;
		display: flex;
		align-items: center;
		padding-left: 5rpx;
		border-bottom: 1rpx solid #EFEFEF;

		.cart-title-text {
			font-size: 14rpx;
			margin-left: 10rpx;
		}
	}

	.empty-cart {
		display: flex;
		flex-direction: column;
		align-items: center;
		padding-top: 150rpx;

		.empty-img {
			width: 90rpx;
			height: 90rpx;
		}

		.tip-text {
			font-size: 24rpx;
			color: gray;
			margin-top: 15rpx;
		}
	}

	.goods_button {
		position: fixed;
		bottom: -9rpx;
		// left: 0;
		right: 0;
		width: 100%;
		background-color: white;
		height: 90rpx;

		.goods_buttonBox {
			display: flex;
			justify-content: flex-end;
			line-height: 90rpx;

			.button_left {
				display: flex;
				justify-content: space-between;
				align-items: center;

				// margin-right: 20rpx;
				.goodsInfo_goodsInfo1 {
					// height: 60rpx;
					padding: 0 40rpx;
					// line-height: 60rpx;
					text-align: center;
					background-color: orange;
				}
			}

			.goodsInfo-goodsInfo {
				display: flex;
				color: white;

				.goodsInfo_goodsInfo0 {
					height: 60rpx;
					padding: 0 30rpx;
					text-align: center;
					// line-height: 60rpx;
					background-color: #f4f438;
				}

				// .goodsInfo_goodsInfo1 {
				// 	height: 60rpx;
				// 	padding: 0 40rpx;
				// 	line-height: 60rpx;
				// 	text-align: center;
				// 	background-color: orange;
				// }
			}

			.uni-goods-nav {
				width: 150rpx;
			}
		}


	}

	.product_list_box {
		padding-top: 10rpx;


		.product_list_title {
			font-size: 24rpx;
			font-weight: 400;
			color: #706e6e;
			padding-left: 15rpx;
			line-height: 60rpx;
			background-color: white;
			border-bottom: 1rpx solid #EFEFEF;
		}

		.product_express {
			font-size: 24rpx;
			padding: 10rpx;
			// padding-left: 15rpx;
			// margin: 0 15rpx;
			background-color: white;
			display: flex;
			line-height: 40rpx;
			border-bottom: 1px solid #EFEFEF;
		}

		.product_list_item {
			background-color: white;
			padding: 30rpx 10rpx 30rpx 10rpx;
			// line-height: 60px;
			border-bottom: 1px solid #EFEFEF;

			.product_item_left {
				display: flex;

				.produce_image {
					height: 200rpx;
					width: 300rpx;
					// width: 40%;
					// display: block !important;
				}

				.produce_details {
					flex: 1;
					display: flex;
					flex-direction: column;
					justify-content: space-around;
					margin: 10px;

					.produce_name {}

					.produce_price {
						display: flex;
						justify-content: space-between;

						.price_box {
							color: orangered;
						}
					}
				}
			}
		}
	}

	.message_box {
		background-color: white;
		display: flex;
		padding: 10rpx;
		border-bottom: 1px solid #EFEFEF;
		align-items: center;
		margin-bottom: 20rpx;

		.uni-easyinput {
			.is-input-border {
				border: none !important;
			}

		}

		// padding: 10px;
	}
</style>